<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #code {
            width: 60px;
            text-align: center;
            background-color: #ddd;
            letter-spacing: 3px;
            border: 0;
            font-style: italic;
            line-height: 2;
            display: inline-block;
        }
    </style>
</head>

<body>

    <p>
        <label for="">请输入姓名</label>
        <input type="text" id="username">
        <span id="userSpan">请输入6-12位，数字或者字母或者_组成，且数字不能开头</span>
    </p>
    <!-- <p>
        <label for="">请输入中文昵称</label>
        <input type="text" id="nickname">
        <span id="nameSpan">请输入2-4中文</span>
    </p> -->
    <p>
        <label for="">请输入密码</label>
        <input type="text" id="userpwd">
        <span id="pwdSpan">请输入6-12位，数字，字母组成</span>
    </p>
    <!-- <p>
        <label for="">确认密码</label>
        <input type="text">
        <span>请输入相同的密码</span>
    </p>
    <p>
        <input type="text" id="codeInp" placeholder="请输入验证码">
        <input id="code" type="text" disabled >
        <button id="refresh">刷新</button>
        <span id="codeSpan">验证码不分大小写</span>
    </p> -->
    <p>
        <button id="btn" disabled>提交</button>
    </p>


    <script>


        // disabled  此属性可以禁掉js事件




        // 获取元素

        // 获取用户名和提示
        var oUser = document.getElementById('username');
        var oUserSpan = document.getElementById('userSpan');

        // 获取密码和提示
        var oPwd = document.getElementById('userpwd');
        var oPwdSpan = document.getElementById('pwdSpan');

        // 获取验证码
        var oCodeInp = document.getElementById('codeInp');
        var oCode = document.getElementById('code');
        var oCodeSpan = document.getElementById('codeSpan');



        var oBtn = document.getElementById('btn');
        var oRefresh = document.getElementById('refresh');



        // onblur事件


        // 判断是否验证通过   
        var isUser = 0, isPwd = 0;

        // 验证用户名
        oUser.onblur = function () {
            var username = this.value;
            // 为空  --- 匹配任意字符0次   /.{0}/ 
            if (/^.{0}$/.test(username)) {
                oUserSpan.innerHTML = '不能空';
                oUserSpan.style.color = 'red';
                // 每次验证错误都要把isUser设为0
                isUser = 0;

            }
            // 长度 6-12   /.{0,5}  .{13,}/
            else if (/^.{0,5}$/.test(username) || /^.{13,}$/.test(username)) {
                oUserSpan.innerHTML = '长度不对';
                oUserSpan.style.color = 'red';
                isUser = 0;

            }

            // 数字开头
            else if (/\d/.test(username[0])) {
                oUserSpan.innerHTML = '数字不能开头';
                oUserSpan.style.color = 'red';
                isUser = 0;
            }

            // 非法  \W
            else if (/\W/.test(username)) {
                oUserSpan.innerHTML = '只能包含数字字母和下划线';
                oUserSpan.style.color = 'red';
                isUser = 0;

            }

            else {
                // 输入正确
                oUserSpan.innerHTML = '√';
                oUserSpan.style.color = 'green';
                isUser = 1;
            }


            // 
            if (isUser && isPwd) {
                oBtn.disabled = false;
            } else {
                oBtn.disabled = true;
            }
        }


        // 中文昵称  /^[\u4e00-\u9fa5]{2,4}$/

        // 邮箱   符号@符号.符号    /^\w+@\w+\.\w+$/

        // 手机号

        // 身份证验证  18     42 01 17 2000  02 02  123 0-9X    19 20
        // var reg = /^\d{17}[\dX]$/ ;

        // var reg = /^\d{6}(19)|(20)\d{2}(0|1)\d(0|1|2|3)\d{4}[\dXx]$/;
        // console.log(reg.test('40000020000202124X'));


        oPwd.onblur = function () {
            // 强弱验证  
            var pwd = this.value;

            if (/^.{0}$/.test(pwd)) {
                oPwdSpan.innerHTML = '不能为空'
                isPwd = 0;
            }

            else if ('长度') { }

            else {
                // 验证密码强弱
                var count = 0;
                // 判断是否有数字
                if (/\d/.test(pwd)) {
                    count++;
                }
                // 判断小写
                if (/[a-z]/.test(pwd)) {
                    count++;
                }
                // 判断大写
                if (/[A-Z]/.test(pwd)) {
                    count++;
                }

                if (count === 1) {
                    oPwdSpan.innerHTML = '弱'
                 
                }
                else if (count === 2) {
                    oPwdSpan.innerHTML = 'zhong'
                 
                }
                else {
                    oPwdSpan.innerHTML = 'qiang'
                    
                }
                isPwd = 1;
            }


            console.log(isUser, isPwd);
            if (isUser && isPwd) {
                oBtn.disabled = false;
            } else {
                oBtn.disabled = true;
            }
        }






    </script>

</body>

</html>